<template>
	<view class="SpikeRecord">
		<view class="SpikeRecord_list">
			<view class="SpikeRecord_list_imgBox">
				<image src="../../../../static/home/miaoshatu.jpeg" mode=""></image>
			</view>
			<view class="SpikeRecord_list_right">
				<view class="SpikeRecord_list_right_title">
					商品名称
				</view>
				<view class="SpikeRecord_list_right_content">
					<view class="SpikeRecord_list_right_content_Numleft">
						￥
					</view>
					<view class="SpikeRecord_list_right_content_Num">
						888
					</view>
				</view>
				<view class="SpikeRecord_list_right_buttonBox">
					<view class="SpikeRecord_list_right_buttonBox_left">
						置换
					</view>
					<view class="SpikeRecord_list_right_buttonBox_right">
						提货
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.SpikeRecord {
		.SpikeRecord_list {
			margin-top: 20upx;
			background-color: #FFFFFF;
			border-radius: 36upx;
			padding: 36upx;
			display: flex;

			.SpikeRecord_list_imgBox {
				width: 230upx;
				height: 230upx;
				border-radius: 16upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.SpikeRecord_list_right {
				width: calc(100% - 40upx - 230upx);
				margin-left: 40upx;

				.SpikeRecord_list_right_title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
					line-height: 40upx;
				}

				.SpikeRecord_list_right_content {
					display: flex;
					align-items: center;
					margin-top: 40upx;

					.SpikeRecord_list_right_content_Numleft {
						font-size: 24upx;
						color: #ED2525;
					}

					.SpikeRecord_list_right_content_Num {
						font-size: 50upx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #ED2525;
						line-height: 50upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.SpikeRecord_list_right_buttonBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30upx;
					.SpikeRecord_list_right_buttonBox_left {
						width: calc((100% - 26upx) /2);
						height: 56upx;
						background: #ED2525;
						border-radius: 28upx;
						font-size: 28upx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 40upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.SpikeRecord_list_right_buttonBox_right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: calc((100% - 26upx) /2);
						height: 56upx;
						border-radius: 28upx;
						border: 2upx solid rgba(0, 0, 0, 0.2);
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.2);
						line-height: 40upx;
					}
				}

			}
		}
	}
</style>
